<template>
  <div class="editor-toolbar">
    <!-- 基础操作组 -->
    <div class="toolbar-group">
      <button
        class="toolbar-btn"
        title="选择 (V)"
        @click="$emit('mode-change', 'select')"
      >
        <i class="fas fa-mouse-pointer"></i>
      </button>
      <!-- <div class="toolbar-separator"></div> -->
      <button
        class="toolbar-btn"
        title="剪切 (Ctrl+X)"
        @click="$emit('cut-object')"
        :disabled="!hasSelection"
      >
        <i class="fas fa-cut"></i>
      </button>
      <button
        class="toolbar-btn"
        title="复制 (Ctrl+C)"
        @click="$emit('copy-object')"
        :disabled="!hasSelection"
      >
        <i class="fas fa-copy"></i>
      </button>
      <button 
        class="toolbar-btn" 
        title="克隆 (Ctrl+D)" 
        @click="$emit('clone-object')"
        :disabled="!hasSelection"
      >
        <i class="fas fa-window-restore"></i>
      </button>
      <!-- <div class="toolbar-separator"></div> -->
      <button
        class="toolbar-btn danger"
        title="删除 (Delete)"
        @click="$emit('delete-object')"
        :disabled="!hasSelection"
      >
        <i class="fas fa-trash-alt"></i>
      </button>
    </div>

    <div class="group-separator"></div>

    <!-- 对齐操作组 -->
    <div class="toolbar-group">
      <button
        class="toolbar-btn"
        title="左对齐"
        @click="$emit('align-objects', 'left')"
        :disabled="!hasSelection"
      >
        <i class="fas fa-align-left"></i>
      </button>
      <button
        class="toolbar-btn"
        title="水平居中"
        @click="$emit('align-objects', 'center')"
        :disabled="!hasSelection"
      >
        <i class="fas fa-align-center"></i>
      </button>
      <button
        class="toolbar-btn"
        title="右对齐"
        @click="$emit('align-objects', 'right')"
        :disabled="!hasSelection"
      >
        <i class="fas fa-align-right"></i>
      </button>
      <div class="toolbar-separator"></div>
      <button
        class="toolbar-btn"
        title="顶部对齐"
        @click="$emit('align-objects', 'top')"
        :disabled="!hasSelection"
      >
        <i class="fas fa-grip-lines"></i>
      </button>
      <button
        class="toolbar-btn"
        title="垂直居中"
        @click="$emit('align-objects', 'middle')"
        :disabled="!hasSelection"
      >
        <i class="fas fa-grip-lines" style="transform: translateY(2px)"></i>
      </button>
      <button
        class="toolbar-btn"
        title="底部对齐"
        @click="$emit('align-objects', 'bottom')"
        :disabled="!hasSelection"
      >
        <i class="fas fa-grip-lines" style="transform: translateY(4px)"></i>
      </button>
    </div>

    <div class="group-separator"></div>

    <!-- 分布操作组 -->
    <!-- <div class="toolbar-group">
      <button
        class="toolbar-btn"
        title="水平分布"
        @click="$emit('distribute-objects', 'horizontal')"
        :disabled="!hasMultipleSelection"
      >
        <i class="fas fa-ellipsis-h"></i>
      </button>
      <button
        class="toolbar-btn"
        title="垂直分布"
        @click="$emit('distribute-objects', 'vertical')"
        :disabled="!hasMultipleSelection"
      >
        <i class="fas fa-ellipsis-v"></i>
      </button>
    </div>

    <div class="group-separator"></div> -->

    <!-- 图层操作组 -->
    <div class="toolbar-group">
      <button
        class="toolbar-btn"
        title="置于顶层"
        @click="$emit('arrange-layer', 'front')"
        :disabled="!hasSelection"
      >
        <i class="fas fa-layer-group"></i>
      </button>
      <button
        class="toolbar-btn"
        title="上移一层"
        @click="$emit('arrange-layer', 'forward')"
        :disabled="!hasSelection"
      >
        <i class="fas fa-chevron-up"></i>
      </button>
      <button
        class="toolbar-btn"
        title="下移一层"
        @click="$emit('arrange-layer', 'backward')"
        :disabled="!hasSelection"
      >
        <i class="fas fa-chevron-down"></i>
      </button>
      <button
        class="toolbar-btn"
        title="置于底层"
        @click="$emit('arrange-layer', 'back')"
        :disabled="!hasSelection"
      >
        <i class="fas fa-layer-group" style="opacity: 0.5"></i>
      </button>
    </div>

    <div class="group-separator"></div>

    <!-- 辅助工具组 -->
    <div class="toolbar-group">
      <!-- <button
        class="toolbar-btn"
        :class="{ active: showGrid }"
        title="显示网格"
        @click="$emit('toggle-grid')"
      >
        <i class="fas fa-border-all"></i>
      </button> -->
      <button
        class="toolbar-btn"
        :class="{ active: showRuler }"
        title="显示标尺"
        @click="$emit('toggle-ruler')"
      >
        <i class="fas fa-ruler-combined"></i>
      </button>
      <button
        class="toolbar-btn"
        :class="{ active: showGuides }"
        title="显示参考线"
        @click="$emit('toggle-guidelines')"
      >
        <i class="fas fa-grip-lines"></i>
      </button>
      <!-- <button
        class="toolbar-btn"
        title="显示尺寸"
        @click="$emit('show-dimensions')"
      >
        <i class="fas fa-ruler"></i>
      </button> -->
    </div>

    <div class="group-separator"></div>

    <!-- 缩放控制组 -->
    <div class="toolbar-group">
      <button class="toolbar-btn" title="缩小 (Ctrl+-)" @click="$emit('zoom-out')">
        <i class="fas fa-search-minus"></i>
      </button>
      <div class="zoom-level">{{ Math.round((zoomLevel || 1) * 100) }}%</div>
      <button class="toolbar-btn" title="放大 (Ctrl++)" @click="$emit('zoom-in')">
        <i class="fas fa-search-plus"></i>
      </button>
      <button
        class="toolbar-btn"
        title="重置 (Ctrl+0)"
        @click="$emit('original-size')"
      >
        <i class="fas fa-expand"></i>
      </button>
    </div>

    <!-- 居中画布按钮 -->
    <!-- <button
      class="toolbar-btn"
      title="居中画布"
      @click="$emit('center-canvas')"
    >
      <i class="fas fa-crosshairs"></i>
    </button> -->
  </div>
</template>

<script setup lang="ts">
defineProps({
  hasSelection: {
    type: Boolean,
    default: false
  },
  hasMultipleSelection: {
    type: Boolean,
    default: false
  },
  isLocked: {
    type: Boolean,
    default: false
  },
  isGroup: {
    type: Boolean,
    default: false
  },
  showGrid: {
    type: Boolean,
    default: false
  },
  showRuler: {
    type: Boolean,
    default: false
  },
  showGuides: {
    type: Boolean,
    default: false
  },
  zoomLevel: {
    type: Number,
    default: 1
  }
});

defineEmits([
  'mode-change',
  'cut-object',
  'copy-object',
  'delete-object',
  'align-objects',
  'distribute-objects',
  'arrange-layer',
  'toggle-lock',
  'toggle-group',
  'flip-object',
  'clone-object',
  'toggle-grid',
  'toggle-ruler',
  'toggle-guidelines',
  'show-dimensions',
  'zoom-in',
  'zoom-out',
  'original-size',
  'center-canvas'
]);
</script>

<style scoped>
/* 顶部工具栏样式 */
.editor-toolbar {
  height: 54px;
  background-color: #fff;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  align-items: center;
  padding: 0 12px;
  overflow-x: auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.toolbar-group {
  display: flex;
  align-items: center;
  padding: 0 5px;
  height: 42px;
}

.toolbar-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  color: #555;
  margin: 0 3px;
  transition: all 0.2s ease;
}

.toolbar-btn:hover:not(:disabled) {
  background-color: #f5f5f5;
  border-color: #e0e0e0;
  color: #333;
}

.toolbar-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.toolbar-btn.active {
  background-color: #e8f4ff;
  border-color: #1890ff;
  color: #1890ff;
}

.toolbar-btn.danger:hover:not(:disabled) {
  color: #ff4d4f;
  border-color: #ffccc7;
  background-color: #fff2f0;
}

.toolbar-separator {
  width: 1px;
  height: 20px;
  background-color: #eaeaea;
  margin: 0 6px;
}

.group-separator {
  width: 1px;
  height: 32px;
  background-color: #eaeaea;
  margin: 0 10px;
}

.zoom-level {
  min-width: 50px;
  text-align: center;
  font-size: 13px;
  padding: 0 6px;
  font-weight: 500;
  color: #666;
}
</style> 